<template>
	<view class="container">
		<!-- 图表显示区域 -->
		<view class="charts-box" @touchmove="viewHistoryData" @touchend="resumeDataRefresh">
			<!-- qiun-data-charts 组件用于显示类型为line的折线图，传入的数据包括图表选项opts和图表数据chartData -->
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" />
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				// 雨水数据
				rain: '',
				// 图表数据对象，包含时间轴(categories)和数据系列(series)
				chartData: {
					categories: [], // 时间轴，用于x轴显示
					series: [{ // 数据系列
						name: '雨水',
						data: [] // 雨水数据数组
					}]
				},
				// 图表选项
				opts: {
					color: ["#0099ff"], // 系列颜色
					padding: [15, 10, 0, 15], // 图表内边距
					enableScroll: true, // 启用滚动
					legend: {}, // 图例配置
					xAxis: {
						disableGrid: true, // 禁用网格线
						rotateLabel: true, // 旋转标签
						scrollShow: true, // 显示滚动条
						itemCount: 6, // 视图中的数据点数量
						scrollAlign: "right"
					},
					yAxis: {
						gridType: "dash", // 网格线类型为虚线
						dashLength: 2 // 虚线段长
					},
					extra: {
						line: {
							type: "straight", // 线型为直线
							width: 2, // 线宽
							activeType: "hollow" // 激活点类型为空心
						}
					}
				},

				// 认证令牌
				token: '',
				isviewHistoryData: false, //滑动查看历史数据标志
				touchTimeout: null, // 触摸超时计时器
			}
		},
		onLoad(options) {
			// 页面加载时从云数据库获取最近一天的数据
			this.loadRecentDayData();
		},
		onShow() {
			// 页面显示时设置10秒定时刷新数据
			setInterval(() => {
				if (!this.isviewHistoryData) {
					this.loadRecentDayData();
				}
			}, 30000);
		},
		//下拉刷新
		onPullDownRefresh() {
			this.isviewHistoryData = false;
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		methods: {
			viewHistoryData() {
				this.isviewHistoryData = true;
				// 清除之前的计时器
				if (this.touchTimeout) {
					clearTimeout(this.touchTimeout);
				}
			},
			resumeDataRefresh() {
				// 设置一个延迟，让用户有时间查看数据，然后恢复刷新
				if (this.touchTimeout) {
					clearTimeout(this.touchTimeout);
				}
				this.touchTimeout = setTimeout(() => {
					console.log("恢复数据刷新");
					this.isviewHistoryData = false;
					// 立即获取一次最新数据
					this.loadRecentDayData();
				}, 3000); // 3秒后恢复刷新
			},
			// 从云数据库获取最近一天的雨量数据
			async loadRecentDayData() {
				try {
					console.log('开始获取最近一天的雨量数据');
					const result = await uniCloud.callFunction({
						name: 'getHistoryData',
						data: {
							queryType: 'getRecentDay'
						}
					});
					
					if (result.result.code === 0) {
						const data = result.result.data.dataList;
						console.log('获取到数据条数：', data.length);
						
						// 重置图表数据
						this.chartData.categories = [];
						this.chartData.series[0].data = [];
						
						// 处理数据并填充图表
						data.forEach(item => {
							const date = new Date(item.timestamp);
							const timeStr = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
							
							this.chartData.categories.push(timeStr);
							this.chartData.series[0].data.push(parseFloat(item.rain));
						});
						
						// 触发渲染更新
						this.$forceUpdate();
						console.log('雨量图表数据更新完成');
					} else {
						console.error('获取历史数据失败：', result.result.message);
					}
				} catch (error) {
					console.error('调用云函数失败：', error);
				}
			},
		}


	}
</script>


<style>
	.container {
		display: flex;
		flex-direction: column;
	}

	.charts-box {
		width: 100%;
		height: 300px;
		/* 设置图表容器的高度 */
	}
</style>